<template>
    <div class="player">
        <navbar></navbar>
        <div class="play">
            <video id="my-player" class="video-js vjs-default-skin" controls preload="auto"
                   data-setup='{}'>
                <source>
            </video>
            <div class="video-wrap" style="display: none">
            </div>
            <div class="user-up">
                <img :src="upInfo.img" v-if="upInfo.img"
                     @click="$router.push({path:'/visitor',query:{uuid:item.user.uuid}})">
                <img src="@/assets/default_img.jpg" v-else>
                <div class="up-info">
                    <span class="up-name">{{upInfo.name}}</span>
                    <span class="up-fans">0粉丝</span>
                </div>
            </div>
            <div class="detailText">
                <div>
                    <span>首页</span>
                    <span>{{item.name}}</span>
                </div>
                <div>
                    <span>{{item.storyline}}</span>

                </div>
                <div>
                    <p @click="likeClick" :class="{activeColor:likeActive}">
                        <span class="iconfont icon-dianzan"></span>
                        <span>点赞</span>
                    </p>
                    <p @click="collectionClick" :class="{activeColor:collectionActive}">
                        <span class="iconfont icon-starshoucang"></span>
                        <span>收藏</span>
                    </p>
                    <p @click="subscriptClick" :class="{activeColor:subscritionActive}">
                        <span class="iconfont icon-eyechuanyue"></span>
                        <span v-if="!subscritionActive">关注</span>
                        <span v-else>已关注</span>
                    </p>
                    <p>
                        <span class="iconfont icon-sharefenxiang"></span>
                        <span>分享</span>
                    </p></div>
            </div>
        </div>
        <van-divider/>
        <van-collapse v-model="activeNames">
            <van-collapse-item title="开始播放" name="2">
                <van-tabs v-model="active">
                    <van-tab v-for="index in 4" class="buttons" :title="'源'+index">
                        <van-list>
                            <van-button @click="play(index2)" class="button" type="primary" size="small"
                                        :class="{'buttonActiveColor':res.buttonActive==true}"
                                        v-for="(res,index2) in resource">
                                {{res.episode}}
                            </van-button>
                        </van-list>
                    </van-tab>
                </van-tabs>
            </van-collapse-item>
        </van-collapse>

        <van-divider
                :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        >
            为您推荐
        </van-divider>
        <div class="coverParent">
            <itemCover v-for="(item, itemIndex) in recommends" :nowGenre_Item="item"
                       :key="itemIndex" class="cover" v-if=recommends></itemCover>
        </div>
        <comment-title :dataLength="lens" @Postcomment="PostSuccess($event)" ref="commentIpt"></comment-title>
        <Comment @lengthselect="len => lens = len" ref="commentPulish" @publishClick="PostChildClick"></Comment>
    </div>
</template>

<script>
    import navbar from "@/components/common/navbar";
    import itemCover from "@/components/common/itemCover";
    import CommentTitle from "@/components/UserComponents/CommentTitle";
    import Comment from "@/components/UserComponents/Comment";
    import videojs from 'video.js'
    import 'videojs-contrib-hls'

    export default {
        name: "article",
        data() {
            return {
                activeNames: ["1"],
                resource: [],
                active: 0,
                item: [],
                buttonIndex: 0,
                collectionActive: null,
                subscritionActive: false,
                likeActive: null,
                recommends: [],
                collect: {
                    id: null,
                    uuid: "",
                    name: "",
                    userId: "",
                    item_name: "",
                    itemName: "",
                    userImg: "",
                    img: "",
                    upName: "",
                    upUUID: "",
                    item_id: "",
                    is_like: null,
                    is_collet: null,
                    time: null,
                    timer: 0,
                    genre: ""
                },
                isMove: true,
                Postcom: {},
                lens: null,
                upInfo: '',
                userInfo: "",
                userFollow: ""
            }
        },
        destroyed() {
            this.$http.post("/collect/createHistory", this.collect)
            this.myVideo.dispose()
        },
        mounted: function () {
            this.init()
        },
        methods: {
            async init() {
                window.addEventListener("touchstart", (event) => {
                    this.isMove = true;
                })

                setInterval(this.isScroll, 10000)
                const res = await this.$http.get("/user/userinfo")
                const user = res.data.data
                this.userInfo = user
                this.item = JSON.parse(this.$route.query.item)
                this.getVideo()
                axios.get("/movie/movie/recommend", {params: {name: this.item.name}}).then((res) => {
                    this.recommends = res.data
                })
                const res2 = await this.$http.get("/user/userinfo", {params: {uuid: this.item.user.uuid}});
                this.upInfo = res2.data.data
                this.$http.get("/follow/myFollow", {params: {followId: this.upInfo.id}}).then((res) => {
                    if (res.data.data.uuid) {
                        this.subscritionActive = true;
                        this.userFollow = res.data.data
                    }
                })
                this.collect.name = user.name
                this.collect.item_name = this.item.name
                this.collect.itemName = this.item.name
                if (this.item.item_id) {
                    this.collect.item_id = this.item.item_id
                } else {
                    this.collect.item_id = this.item.id
                }
                this.collect.genre = this.item.genre
                this.collect.userId = user.id;
                this.collect.userImg = user.img
                this.collect.upName = this.upInfo.name
                this.collect.upUUID = this.upInfo.uuid
                this.collect.img = this.item.img
                this.getCollect();
                this.getResource();

            },
            collectionClick() {

                this.collect.is_collect = !this.collectionActive
                this.$http.post("/collect/insert", this.collect).then((res) => {
                    console.log(res.data)
                    if (res.data.code === 0) {
                        this.collectionActive = !this.collectionActive
                    }
                })

            },
            subscriptClick() {
                let userFollow = {
                    user_id: this.userInfo.id,
                    uuid: this.userInfo.uuid,
                    follow: this.upInfo.id
                }

                if (this.subscritionActive === true) {
                    this.$http.get("/follow/deleteFollow", {params: {id: this.userFollow.id}}).then((res) => {
                        if (res.data.code === 0) {
                            this.subscritionActive = false
                        }
                    })
                } else {
                    this.$http.post("/follow/addFollow", userFollow).then((res) => {
                        if (res.data.code === 0) {
                            this.subscritionActive = true
                        }
                    })
                }
            },
            likeClick() {
                this.collect.is_like = !this.likeActive
                this.$http.post("/collect/insert", this.collect).then((res) => {
                    console.log(res.data)
                    if (res.data.code == 0) {
                        this.likeActive = this.collect.is_like
                    }
                })
            },
            getCollect() {
                this.$http.get("/collect/getItemHistory", {params: {item_name: this.item.name}}).then((res) => {
                    const id = res.data.data
                    if (id) {
                        this.collect.id = id.id
                    }
                })
                this.$http.post("/collect/get", this.collect).then((res) => {
                    if (res.data.data.length > 0 && res.data.code == 0) {
                        this.collectionActive = res.data.data[0].is_collect;
                        this.collect.is_collet = res.data.data[0].is_collect;
                        this.likeActive = res.data.data[0].is_like;
                        this.collect.is_like = res.data.data[0].is_like;
                    }
                })
            },
            getResource() {
                this.$http.get("/movie/resource", {
                    params: {
                        id: this.collect.item_id, resource: this.active + 1
                    }
                }).then((res) => {
                    if (res.data.code == 0) {
                        res.data.data.resourceList.forEach((x) => {
                            x.buttonActive = false;
                        })
                        this.resource = res.data.data.resourceList
                        // this.resource.push(...resource.data.resourceList)
                        this.play(0)
                    } else {
                        this.$msg.fail(res.data.message)
                    }
                })
            },
            play(index) {
                // debugger
                const href = this.resource[index].href;
                this.$set(this.resource[this.buttonIndex], 'buttonActive', false)
                // this.resource[index].buttonActive = true;
                this.$set(this.resource[index], 'buttonActive', true)
                this.buttonIndex = index;
                if (href.indexOf("m3u8") != -1) {
                    document.querySelector("#my-player").style.display = '';
                    document.querySelector(".video-wrap").style.display = 'none'
                    document.querySelector(".video-wrap").innerHTML = '';
                    this.myVideo.src({src: href, type: "application/x-mpegURL"})
                } else if (href.indexOf("mp4") != -1) {
                    document.querySelector("#my-player").style.display = '';
                    document.querySelector(".video-wrap").style.display = 'none'
                    document.querySelector(".video-wrap").innerHTML = '';
                    this.myVideo.src({src: href, type: "video/mp4"})
                } else if (href.indexOf("webm") != -1) {
                    document.querySelector("#my-player").style.display = '';
                    document.querySelector(".video-wrap").style.display = 'none'
                    document.querySelector(".video-wrap").innerHTML = '';
                    this.myVideo.src({src: href, type: "video/webm"})
                } else {
                    const iframe = '            <iframe src="{0}" frameborder="0"\n' +
                        '                    allow="autoplay;encrypted-media" allowfullscreen>\n' +
                        '            </iframe>'
                    document.querySelector("#my-player").style.display = 'none';
                    document.querySelector(".video-wrap").style.display = '';
                    document.querySelector(".video-wrap").innerHTML = iframe.format(href)
                }
            },
            getVideo() {
                this.myVideo = videojs("my-player", {
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: false,
                    errorDisplay: false,
                    hls: {
                        withCredentials: true
                    }
                });
            },
            isScroll: function () {
                if (this.isMove) {
                    this.collect.timer += 10;
                    console.log(this.collect.timer)
                    this.isMove = false
                }
            },
            //发送评论
            async PostSuccess(res) {
                const date = new Date()
                let m = date.getMonth() + 1
                let d = date.getDate()
                if (m < 10) {
                    m = '0' + m
                }
                if (d < 10) {
                    d = '0' + d
                }
                this.Postcom.comment_content = res
                this.Postcom.article_id = this.item.id
                const result = await this.$http.post('/comment/submitComment', this.Postcom)
                this.$refs.commentPulish.loadComment()
                this.Postcom.parent_id = null
            },        //聚焦输入框
            PostChildClick(id, uuid) {
                this.Postcom.parent_id = id
                this.Postcom.parent_uuid = uuid
                this.$refs.commentIpt.focusIpt()
            }
        },

        watch: {
            active: function () {
                this.getResource()
            },
            '$route': function () {
                location.reload()
            }
        }
        ,
        components: {
            navbar, itemCover, CommentTitle, Comment
        }
    }
</script>

<style lang="scss">
    .player {
        background-color: white;

        .buttons {
            width: 100%;
            /*justify-content:center;*/
            display: flex;
            flex-wrap: wrap;
            height: 300px;
            overflow: scroll;

            .buttonActiveColor {
                background: #fb7a9f;
            }

            button {
                margin: 0.56vw;
            }
        }

        .play {
            #my-player {
                width: 100%;
                height: 55.56vw;
            }


            iframe {
                width: 100%;
                height: 97.22vw;
            }

            .detailText {
                padding: 4.167vw;

                div:nth-child(1) {
                    span:nth-child(1) {
                        padding: 0 2.778vw;
                        color: #fb7299;
                        background-color: #f4f4f4;
                        border-radius: 2.778vw;
                    }
                }

                div:nth-child(2) {
                    padding: 2.778vw 2.778vw;

                    span {
                        color: #aaa;
                        font-size: 3.333vw;
                        margin-right: 2.778vw;
                    }

                    /*span:nth-child(1) {*/
                    /*    color: black;*/
                    /*    font-size: 4vw;*/
                    /*    padding-right:2.778vw;*/
                    /*}*/
                }

                div:nth-child(3) {
                    padding: 0 2.778vw;
                    display: flex;

                    p {
                        margin-right: 2.78vw;
                        display: flex;
                        align-items: center;
                        color: #757575;

                        span:nth-child(1) {
                            margin-right: 0.83vw;
                            font-size: 5.83vw;
                        }

                        span:nth-child(2) {
                            font-size: 3.61vw;
                        }
                    }

                    .activeColor {
                        color: #fb7299;
                    }
                }
            }
        }

        .user-up {
            display: flex;
            margin-top: 4vw;
            margin-left: 4vw;
            align-items: center;

            img {
                height: 9.042vw;
                width: 9.042vw;
                border-radius: 50%;
                margin-right: 3vw;
            }

            .up-info {
                display: flex;
                flex-direction: column;

                .up-name {
                    color: rgba(255, 122, 155, 1);
                }

                .up-fans {
                    font-size: 1px;
                    color: #7a7a7a;
                }
            }
        }

        .coverParent {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .cover {
                width: 45%;
                margin: 1.39vw 0;
            }
        }


    }
</style>